<template>
  <div class="e-employee-list">
      <!-- 搜索条件 -->
      <div class="e-filter-options">
        <div class="e-item">
            <span class="title">申请时间</span>
            <div class="o-select dis-block">
              <w-date-picker language="ch" placeholder="请选择申请时间" v-model="queryParams.applyTime"></w-date-picker>
            </div>
        </div>
        <div class="e-item">
            <span class="title">申请人</span>
            <div class="o-select dis-block">
              <w-input :holder='`请填写`' v-model="queryParams.applyName"></w-input>
            </div>
        </div>
        <div class="e-item">
            <span class="title">处理状况</span>
            <div class="input dis-block">
              <w-select :options='statusList' v-model="queryParams.applyStatus"></w-select>
            </div>
        </div>
        <!-- 搜索按钮 -->
        <div class="filter-btn">
          <w-button @on-click='onChangePage(1)'>搜索</w-button>
        </div>
      </div>
      <!-- 员工列表 -->
      <div class="e-filter-list">
        <div class="e-add clearfix">
          <span>共计：{{applyList.totalCount}}条</span>
        </div>
        <!-- 列表数据 -->
        <div class="e-list clearfix" v-if="applyList.totalCount">
          <table>
            <tr class="table-h">
              <th>申请人</th>
              <th>申请时间</th>
              <th width='340px;'>处理状况</th>
              <th>详情</th>
            </tr>
            <tbody v-if="isData">
              <tr v-for="(val, index) in applyList.recordList" :key="index">
                <td>{{val.userName}}</td>
                <td>{{val.applyTime}}</td>
                <td>
                  <em v-if="val.applyRoleId">角色审批状况：{{val.applyRoleStatus == '0' ? '待审核'  : val.applyRoleStatus == '1' ? '通过' : '拒绝'}}</em> 
                  <em v-if="val.applyDepartmentId">部门审批状况：{{val.applyDepartmentStatus == '0' ? '待审核'  : val.applyDepartmentStatus == '1' ? '通过' : '拒绝'}}</em>
                </td>
                <td>
                  <span class="cur" @click="applyPanel(val)" v-if='val.applyRoleStatus == 0 || val.applyDepartmentStatus == 0'>审批 |</span>
                  <span class="cur" @click="cancel = true; delParams.ids = [val.id]">删除 |</span>
                  <span class="cur" @click="applyPanel(val, 'see')">查看</span>
                </td>
              </tr>
            </tbody>
            <tbody v-if="!isData">
              <tr>
                <td colspan='4'>暂无数据</td>
              </tr>
            </tbody>
          </table>
          <!-- 分页 -->
          <div class="fr" style="margin-top: 55px">
            <w-paging :current="applyList.currentPage" :total="applyList.pageCount" @on-page="onChangePage"></w-paging>
          </div>
        </div>
          
        <!-- 没有数据时 -->
        <div class="e-list" v-else>
          <table>
            <tr class="table-h">
              <th>申请人</th>
              <th>申请时间</th>
              <th>处理状况</th>
              <th>详情</th>
            </tr>
            <tr>
              <td colspan="4">暂无数据</td>
            </tr>
          </table>
        </div>
      </div>

      <!-- 审批弹框 -->
      <w-panel-fixed-wrap v-model="apply" :panel-title="true" title="员工申请审批" :width="`680px`" :height="`340px`" :confirmText='`提交`' @on-confirm='submitApply'>
        <div class="apply-panel">
          <table>
            <tr>
              <td>申请人：</td>
              <td>{{applyInfo.userName}}</td>
            </tr>
            <tr>
              <td v-if="applyInfo.applyRoleId"> 角色修改为：</td>
              <td v-if="applyInfo.applyRoleId"> {{applyInfo.applyRoleName}} </td>
              <td v-if="applyInfo.applyDepartmentId"> 部门修改为：</td>
              <td v-if="applyInfo.applyDepartmentId"> {{applyInfo.applyDepartmentName}} </td>
            </tr>
            <tr>
              <td v-if="applyInfo.applyRoleId"> 角色处理意见：</td>
              <td v-if="applyInfo.applyRoleId">
                <div class="radioGroup clearfix">
                  <div class="radio fl">
                    <w-radio :label="1" name="role" v-model="applyParams.applyRoleStatus">同意</w-radio>
                  </div>
                  <div class="radio">
                    <w-radio :label="-1" name="role"  v-model="applyParams.applyRoleStatus">不同意</w-radio>
                  </div>
                </div> 
              </td>
              <td v-if="applyInfo.applyDepartmentId"> 部门处理意见：</td>
              <td v-if="applyInfo.applyDepartmentId">
                <div class="radioGroup clearfix">
                  <div class="radio fl">
                    <w-radio :label="1" name="depart" v-model="applyParams.applyDepartmentStatus">同意</w-radio>
                  </div>
                  <div class="radio">
                    <w-radio :label="-1" name="depart" v-model="applyParams.applyDepartmentStatus">不同意</w-radio>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td v-if="applyInfo.applyRoleId">角色审批回复：</td>
              <td v-if="applyInfo.applyRoleId">
                <textarea name="" id="" v-model="applyParams.roleCause"></textarea>
              </td>
              <td v-if="applyInfo.applyDepartmentId"> 部门审批回复：</td>
              <td v-if="applyInfo.applyDepartmentId">
                <textarea name="" id="" v-model="applyParams.departmentCause"></textarea>
              </td>
            </tr>
          </table>
        </div>
      </w-panel-fixed-wrap>

      <!-- 确认是否删除 -->
      <w-panel-fixed-wrap v-model="cancel" :panel-title="true" title="提示" :width="`260px`" :height="`210px`" @on-confirm='submitDelete'>
        <div class="sure-cancel">
          是否确认删除该员工申请审批？
        </div>
      </w-panel-fixed-wrap>

      <!-- 查看弹框 -->
      <w-panel-fixed-wrap v-model="see" :panel-title="true" :showClose='true' :showBtns='false' title="员工申请审批查看" :width="`680px`" :height="`300px`">
        <div class="apply-panel">
          <table class="see-tab">
            <tr>
              <td width='15%'>申请人：</td>
              <td width='35%'>{{applyInfo.userName}}</td>
            </tr>
            <tr>
              <td v-if="applyInfo.applyRoleId">角色修改为：</td>
              <td v-if="applyInfo.applyRoleId">{{applyInfo.applyRoleName}}</td>
              <td v-if="applyInfo.applyDepartmentId">部门修改为：</td>
              <td v-if="applyInfo.applyDepartmentId">{{applyInfo.applyDepartmentName}}</td>
            </tr>
            <tr>
              <td width='15%' v-if="applyInfo.applyRoleId" > 角色处理意见：</td>
              <td width='35%' v-if="applyInfo.applyRoleId" >
                {{applyInfo.applyRoleStatus == '0' ? '待审核'  : applyInfo.applyRoleStatus == '1' ? '同意' : '不同意'}}
              </td>
              <td width='15%' v-if="applyInfo.applyDepartmentId" > 部门处理意见：</td>
              <td width='35%' v-if="applyInfo.applyDepartmentId">
                {{applyInfo.applyDepartmentStatus == '0' ? '待审核'  : applyInfo.applyDepartmentStatus == '1' ? '同意' : '不同意'}}
              </td>
            </tr>
            <tr v-if='applyInfo.applyRoleStatus != 0 && applyInfo.applyDepartmentStatus != 0'>
                <td width='15%' v-if="applyInfo.applyRoleId" >角色审批回复：</td>
                <td width='35%' v-if="applyInfo.applyRoleId" > {{applyInfo.roleCause}} </td>
                <td width='15%' v-if="applyInfo.applyDepartmentId">部门审批回复：</td>
                <td width='35%' v-if="applyInfo.applyDepartmentId"> {{applyInfo.departmentCause}} </td>
            </tr>
          </table>
        </div>
      </w-panel-fixed-wrap>
  </div>
</template>

<script>
import { apiSystemMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      apply: false,
      cancel: false,
      see: false,
      queryParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        applyName: '',
        applyTime: '',
        applyStatus: '',
        currentPage: '1',
        showCount: '15'
      },
      applyList: [],
      statusList: [
        {
          value: '-1',
          label: '拒绝'
        },
        {
          value: '0',
          label: '待审核'
        },
        {
          value: '1',
          label: '通过'
        }
      ],
      // 审核参数
      applyParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: '',
        applyRoleId: '',
        applyRoleStatus: '',
        roleCause: '', 
        applyDepartmentId: '',
        applyDepartmentStatus: '',
        departmentCause: ''
      },
      // 员工申请信息
      applyInfo: {},
      // 判断是否有员工列表，没有时显示暂无数据
      isData: false,
      delParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        ids: []
      }
    }
  },
  created() {
    this._getApplyList()
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    // 获取 列表
    _getApplyList() {
      this.queryParams.accessToken = this.token
      apiSystemMange.queryApply(this.queryParams).then(data => {
        if (data.code != '200') return
        this.applyList = data.data
        if (data.data.recordList.length) this.isData = true
      })
    },
    onChangePage(page) {
      this.queryParams.currentPage = page
      this._getApplyList()
    },
    applyPanel(data, type) {
      if (type == 'see') {
        this.see = true
      } else {
        this.apply = true
      }
      this.applyInfo = data
      this.applyParams.id = data.id
      this.applyParams.applyRoleId = data.applyRoleId
      this.applyParams.applyDepartmentId = data.applyDepartmentId
      this.applyParams.applyRoleStatus = data.applyRoleStatus
      this.applyParams.applyDepartmentStatus = data.applyDepartmentStatus
      this.applyParams.roleCause = ''
      this.applyParams.departmentCause = ''
    },
    // 审批 提交
    submitApply() {
      this.applyParams.accessToken = this.token
      apiSystemMange.applyEmploy(this.applyParams).then(data => {
        if (data.code != '200') return
        this.$toast('审核成功', () => {
          this.apply = false
          this._getApplyList()
        })
      })
    },
    // 员工审批 删除
    submitDelete() {
      this.delParams.accessToken = this.token
      apiSystemMange.delApply(this.delParams).then(data => {
        if (data.code != '200') return
        this.$toast('删除成功', () => {
          this.cancel = false
          this.queryParams.currentPage = 1
          this._getApplyList()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.e-employee-list {
  margin: 30px 0;
}
.e-filter-options {
  border-bottom: 1px solid $border-gray-light;
  .filter-btn {
    margin: 40px auto 20px;
    text-align: center;
  }
  .dis-block {
    vertical-align: middle;
  }
}
.e-filter-list {
  width: 100%;
  .e-add {
    margin: 20px 0;
    span {
      float: right;
      color: rgba(49, 49, 49, 1);
      line-height: 20px;
    }
  }
}
.apply-panel {
  table {
    width: 100%;
    tr {
      line-height: 30px;
      td {
        position: relative;
        font-size: 12px;
        &:first-child, &:nth-of-type(3) {
          text-align: right;
        }
        .radioGroup {
          display: inline-block;
          width: 200px;
        }
        textarea {
          position: absolute;
          top: 5px;
          display: inline-block;
          width: 190px;
          height: 50px;
          padding: 5px;
        }
      }
    }
  }
}
</style>